<template>
  <div>
    <div v-show="!isShowDate">
      <div class="date-time" @click="isShowDate = true">
        自定义时间 <img src="@/assets/images/icon_riqi.png" alt="" />
      </div>
      <div class="list">
        <!-- <p>订单列表</p> -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ul>
            <li v-for="item in list" :key="item.id">
              <h3>{{ item.tcName }}</h3>
              <div>
                <label>订单号：</label>
                <span>{{ item.orderNo }}</span>
              </div>
              <div>
                <label>手机号：</label>
                <span>{{ item.ordeDn }}</span>
              </div>
              <div>{{item.orderTime}}</div>
              <span>{{ item.unitBrokerage }}</span>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
    <div v-show="isShowDate">
      <van-cell
        title="开始时间："
        :value="startTime"
        is-link
        size="large"
        @click="getStartTime(1)"
      />
      <van-cell
        title="结束时间："
        :value="endTime"
        size="large"
        is-link
        @click="getEndTime(2)"
      />
      <div class="btn">
        <van-button type="primary" @click="search" :disabled="isDisabled"
          >查询</van-button
        >
      </div>
      <!-- 日期选择 -->
      <van-popup
        v-model="dateTime"
        round
        position="bottom"
        :style="{ height: '' }"
        safe-area-inset-bottom
      >
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择日期"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="handlerDateTime"
          @cancel="dateTime = false"
        />
      </van-popup>
    </div>
  </div>
</template>
<script>
import { getOrderListByPage } from './service/service.js'
import moment from '@/plugin/moment.js'
export default {
  name: 'OrderView',
  data () {
    return {
      isShowDate: false,
      isDisabled: true,

      pageNo: 1,
      pageSize: 10,
      totalCount: '',

      loading: false,
      finished: false,
      list: [],
      timeIndex: 1,
      dateTime: false,
      currentDate: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      startTime: '',
      endTime: ''
    }
  },
  created () {
    // this.getData()
  },
  methods: {
    getData () {
      const params = {
        startTime: this.startTime,
        endTime: this.endTime,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getOrderListByPage(params)
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }

          this.totalCount = Math.ceil(data.data.totalCount / this.pageSize)
          this.list = [...this.list, ...data.data.orderList]

          // 加载状态结束
          this.loading = false

          // 数据全部加载完成
          if (this.pageNo >= this.totalCount) {
            this.finished = true
            return
          }
          this.pageNo++
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getStartTime () {
      this.dateTime = true
      this.timeIndex = 1
    },
    getEndTime () {
      this.dateTime = true
      this.timeIndex = 2
    },
    onLoad () {
      this.getData()
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
    },
    search () {
      this.list = []
      this.pageNo = 1
      this.finished = false
      this.isShowDate = false
      this.getData()
    },
    // 日期选择确定
    handlerDateTime (val) {
      // console.log(this.startTime, this.endTime)
      this.dateTime = false
      if (this.timeIndex === 1) {
        this.startTime = moment(this.currentDate, 'yyyy-MM-dd HH:mm')
      } else {
        this.endTime = moment(this.currentDate, 'yyyy-MM-dd HH:mm')
      }
      this.isDisabled = false
    },

    formatter (type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      if (type === 'hour') {
        return val + '时'
      }
      if (type === 'minute') {
        return val + '分'
      }
      return val
    }
  }
}
</script>
<style lang="less" scoped>
.date-time {
  height: 44px;
  line-height: 44px;
  background: #f2f2f2;
  padding: 0 15px;
  color: #33649d;

  img {
    width: 17px;
    vertical-align: text-bottom;
    margin-right: 5px;
  }
}
.list {
  padding: 0 15px;
  background: #fff;
  height: calc(100vh - 88px);
  overflow: auto;
  > p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  li {
    border-top: 1px solid #ebedf0;
    padding: 12px 0;
    position: relative;
    h3 {
      font-size: 15px;
    }
    div {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
      // label {
      // }
      // span {
      // }
    }
    > span {
      font-size: 14px;
      color: #ff6565;
      position: absolute;
      top: 48px;
      right: 0;
    }
  }
}
.btn {
  text-align: center;
  width: 100%;
  margin-top: 80px;
  button {
    width: 80%;
    height: 44px;
    background: #1890ff;
    border: 1px solid #1890ff;
    border-radius: 5px;
  }
}
</style>
